<template>
    <view>
        <view class="person-main">
            <view class="person-item" v-for="(item, index) in reportList" :key="index">
                <view class="person-item-left">
                    <view class="person-item-left-img">
                        <image v-if="item.icon" :src="item.icon" />
                        <image v-else :src="require('../static/hearder.png')"></image>
                    </view>
                    <view class="person-item-left-name">
                        <view class="person-item-left-name-title">{{ item.nickname }}</view>
                        <view class="person-item-left-name-time">{{ item.createTime }}</view>
                    </view>
                </view>
                <view class="person-item-right">{{ item.queryShareVisibleType | statusFilter }}</view>
            </view>
        </view>
    </view>
</template>
<script>
import {
    getReportViewCount
} from '@/api/water'
import residenceTime from "@/mixins/residenceTime";
export default {
    mixins: [residenceTime],
    data() {
        return {
            where: {
                pageNum: 1,
                pageSize: 20,
                shareCode: ''

            },
            reportList: [],
            total: 0,
        }
    },
    filters: {
        statusFilter(type) {
            const statusMap = {
                0: "全公开",
                1: "部分公开",
                2: "私密",
                3: "指定访问"
            };
            return statusMap[type];
        }
    },
    methods: {
        pageViewTrack(stayTime) {
            const route = this.$util.getCurrentRoute()
            let params = {
                Um_Key_SourcePage: route.path,
                Um_Key_Duration: stayTime,
            }
            this.$umaTrack.pageViewTrack(params)
        },
        getList() {
            getReportViewCount(this.where).then(res => {
                this.total = res.data.total;
                this.reportList = [...this.reportList, ...res.data.list];
            })
        }
    },
    onLoad(options) {
        console.log(options);
        if (options.shareCode) {
            this.where.shareCode = options.shareCode
        }
        this.getList()

    },
    onReachBottom() {
        if (this.total > this.where.pageSize * this.where.pageNum) {
            this.where.pageNum++;
            this.getList();
        } else {
            this.$util.Tips("没有更多数据了");
        }
    },
}
</script>
<style lang="scss">
page {
    background-color: #fff !important;
}

.person-main {

    .person-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx;
        border-top: 1rpx solid #E5E5E5;

        .person-item-left {
            display: flex;
            align-items: center;

            .person-item-left-img {
                width: 100rpx;
                height: 100rpx;
                border-radius: 50%;
                overflow: hidden;
                margin-right: 30rpx;

                image {
                    width: 100%;
                    height: 100%;

                }
            }

            .person-item-left-name {
                max-width: 320rpx;

                .person-item-left-name-title {
                    font-weight: 600;
                    font-size: 32rpx;
                    color: #000000;
                    margin-bottom: 10rpx;
                }

                .person-item-left-name-time {
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #999999;
                    margin-top: 10rpx;
                }

            }
        }

        .person-item-right {
            font-weight: 400;
            font-size: 28rpx;
            color: #666666;
        }
    }
}
</style>